import { useEffect, useRef } from "react";
import "./index.less";
import * as echarts from "echarts";
import { mapConfig } from "./config";
import chinaJson from "../../json/china.json";
export default function Home() {
  const mapRef = useRef(null);
  let mapEcharts: null | echarts.ECharts = null;
  const getInitEcharts = async () => {
    mapEcharts = echarts.init(mapRef.current);
    mapEcharts.showLoading({
      text: "地图加载中...",
    });
    await new Promise((resolve, reject) => setTimeout(resolve, 5000));
    // @ts-ignore
    echarts.registerMap("chinaMap", chinaJson);
    mapEcharts.setOption(mapConfig);
    mapEcharts.hideLoading();
  };
  useEffect(() => {
    // 立即执行函数
    (async () => await getInitEcharts())();

    return () => {
      mapEcharts && mapEcharts.dispose();
    };
  }, []);
  return <div className="map-contend" ref={mapRef}></div>;
}
